<template>
	<div>
		<el-dialog :visible.sync="dialogVisible" :title="title" :close-on-click-modal="false" width="750px" @close="close">
			<div v-loading="dialogLoading">
				<div style="margin-bottom: 10px" v-if="showRemarks">注：仅支持导出已配置了手机号的员工推广码</div>
				<div class="choose-tips">
					请选择{{ shopType }}：
					<span class="app-text-color-primary">已选择 {{ checkedIds.length }} 家{{ shopType }}</span>
				</div>

				<div class="shop-tree-box">
					<el-input v-model="filterText" size="small" placeholder="输入名称搜索" style="margin-bottom: 10px" />
					<el-tree
						ref="tree"
						:data="treeData"
						:props="treeProps"
						:filter-node-method="filterNode"
						default-expand-all
						show-checkbox
						node-key="id"
						@check-change="handleTree"
					/>
				</div>
			</div>
			<div slot="footer">
				<el-button size="small" round @click="hide">取 消</el-button>
				<el-button :disabled="dialogLoading" size="small" round type="primary" @click="submit">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script type="text/jsx">
import { mapGetters } from 'vuex'

export default {
  props: {
    title: {
      type: String,
      default: '门店列表'
    },
    hasHeadquarters: {
      type: Boolean,
      default: false
    },
    shopType: {
      type: String,
      default: '门店'
    }
  },
  data() {
    return {
      // 状态
      dialogVisible: false,
      dialogLoading: false,
      // 数据
      treeProps: {
        label: 'name'
      },
      filterText: '',
      treeData: [],
      originCheckedIds: [],
      checkedIds: [],
      showRemarks: false
    }
  },

  computed: {
    ...mapGetters(['manageShopList'])
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    open(checkedIds = [], checkedIdsDisabled = false, showRemarks = false) {
      this.showRemarks = showRemarks
      this.originCheckedIds = checkedIds
      this.checkedIds = checkedIds
      this.checkedIdsDisabled = checkedIdsDisabled
      this.fetchData()
      this.show()
    },

    show() {
      this.dialogVisible = true
    },

    hide() {
      this.dialogVisible = false
    },

    close() {
      this.dialogLoading = false
      this.originCheckedIds = []
      this.checkedIds = []
      this.shopList = []
	  this.updateTree();
    },

    loading(loading = true) {
      this.dialogLoading = loading
    },

    /**
     * 获取数据
     */
    // 获取门店列表
    fetchData() {
      this.dialogLoading = true
      // const allList = JSON.parse(JSON.stringify(this.manageShopList))
      // this.shopList = this.hasHeadquarters ? [{ id: 0, name: '总部' }].concat(allList) : allList
      this.shopList = JSON.parse(JSON.stringify(this.manageShopList))
      this.updateTree()
      this.dialogLoading = false
    },

    updateTree() {
      const treeData = [
        {
          id: 'all',
          children: [],
          name: '全部'
        }
      ]
      this.shopList.forEach(v => {
        if (this.checkedIdsDisabled && this.originCheckedIds.includes(v.id)) {
          v.disabled = true
          v.name = v.name + '（已选）'
        }
      })
      treeData[0]['children'] = this.shopList
      this.treeData = treeData
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys(this.checkedIds)
      })
    },

    // 选择tree
    handleTree() {
      this.checkedIds = this.$refs.tree.getCheckedKeys(true)
    },

    // 回调
    submit() {
      let checkedIds = this.$refs.tree.getCheckedKeys(true)
      if (this.checkedIdsDisabled) {
        checkedIds = checkedIds.filter((v) => {
          return !this.originCheckedIds.includes(v)
        })
      }
      this.$emit('emitShopIds', checkedIds)
    },

    /**
     * 状态组
     */
    // 查询改变
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
/* 选择提示 */
.choose-tips {
	margin-bottom: 10px;
}

.shop-tree-box {
	overflow: auto;
	max-height: 500px;
	margin-top: 10px;
}
</style>
